<template>
  <div class="tabBar">
    <van-tabbar v-model="active" active-color="#0e0e25" inactive-color="#0e0e25" route>
      <van-tabbar-item to="/home">
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? icon1.active : icon1.inactive" />
        </template>
      </van-tabbar-item>
       <van-tabbar-item to="/carShop">
        <span>选车</span>
        <template #icon="props">
          <img :src="props.active ? icon2.active : icon2.inactive" />
        </template>
      </van-tabbar-item>
       <van-tabbar-item to="/mine">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? icon3.active : icon3.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
     active: 0,
      icon1: {
        active: 'https://youjia.cdn.bcebos.com/tabs/index%40selected.png',
        inactive: 'https://youjia.cdn.bcebos.com/tabs/index.png',
      },
      icon2: {
        active: 'https://youjia.cdn.bcebos.com/tabs/car%40selected.png',
        inactive: 'https://youjia.cdn.bcebos.com/tabs/car.png',
      },
      icon3: {
        active: 'https://youjia.cdn.bcebos.com/tabs/my%40selected.png',
        inactive: 'https://youjia.cdn.bcebos.com/tabs/my.png',
      },
    }
  }
}
</script>

<style lang="scss" scoped>
.tabBar {
  .van-tabbar {
    height: 55px;
    .van-tabbar-item {
      font-size: 14px;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
  
}
</style>
